<template>
  <div class="popup">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
      <!-- :placeholder="defaultKeyword.keyword" 是当前页的搜索框，所以不需要父传子-->
    </form>
    <!-- 
        搜索框下面的内容，是会变化的
            1.历史和热门
            2.在表单中输入内容后，出现的是搜索列表
            3.输入搜索内容后，敲回车，搜索的商品信息
            这三个页面都是一个路由
            在三个页面中，搜索框是一直存在的
    -->
    <!-- 
        思路：
            在此位置引入三个子组件
            第一个子组件     历史热门  默认
            第二个子组件     搜索列表  搜索内容之后
            第三个子组件     搜索商品信息  敲回车之后

            <第一个组件标签 v-show=='isShow==1'></第一个组件标签>
            <第二个组件标签 v-show=='isShow==2'></第二个组件标签>
            <第三个组件标签 v-show=='isShow==3'></第三个组件标签>

            data(){
                return{
                    isShow:1
                }
            }

    -->
    <!-- 在页面中，引用这三个组件，并且用isshow判断，当前显示的页面是哪页 -->
    <!-- 父传子，给历史和热门传数据 -->
    <!-- 子传父 @zidingyi="fun2"   拿到历史和热门下面点击的商品名 -->
    <HistoryHot
      @zidingyi="fun2"
      :history="historyKeywordList"
      :hot="hotKeywordList"
      v-show="isShow==1"
    ></HistoryHot>
    <SearchList  @zidingyi="fun2" :listdata="searchListData" v-show="isShow==2"></SearchList>
    <SearchGoodsList @order="fun3" @categoryId="fun4" :goodsList="goodsList" v-show="isShow==3"></SearchGoodsList>
  </div>
</template>

<script>
// 引入api.js，必须引入api，因为get在api里写的，现在想用，必须引入
import { GetPopupdata, GetSearchList, GetGoodsList } from "@/request/api.js";
//引入三个子组件
import HistoryHot from "@/components/HistoryHot.vue";
import SearchList from "@/components/SearchList.vue";
import SearchGoodsList from "@/components/SearchGoodsList.vue";
// import { Toast } from 'vant';
export default {
  data() {
    return {
      value: "",
      isShow: 1,
      // 取子元素的值
      getzi: "",
      defaultKeyword: "",
      historyKeywordList: [],
      hotKeywordList: [],
      searchListData: [],
      goodsList: []
    };
  },
  methods: {
    // 筛选 价格
    fun3(o) {
      GetGoodsList({ keyword: this.value, order: o, sort: "price" }).then(
        res => {
          // console.log(res.data);
          this.goodsList = res.data;
        }
      );
    },
    // 筛选  全部居家
    fun4(c) {
      GetGoodsList({ keyword: this.value, categoryId: c}).then(
        res => {
          // console.log(res.data);
          this.goodsList = res.data;
        }
      );
    },
    fun3(o) {
      GetGoodsList({ keyword: this.value, order: o, sort: "price" }).then(
        res => {
          // console.log(res.data);
          this.goodsList = res.data;
        }
      );
    },
    //历史热门点击下面的按钮遍历商品  搜索列表，点击就遍历  子传父
    fun2(v) {
      this.value = v;
      // console.log(v);
      GetGoodsList({ keyword: this.value }).then(res => {
        // console.log(res.data);
        this.goodsList = res.data;
      });
      this.isShow = 3;
    },

    // onSearch，onCancel是所有框的
    // search方法里边的形参，就是你表单里输入的内容
    onSearch(val) {
      // 回车搜索，isshow变成3，商品列表页
      this.isShow = 3;
      // Toast(val)
      GetGoodsList({ keyword: this.value }).then(res => {
        // console.log(res.data);
        this.goodsList = res.data;
      });
    },
    // 取消
    onCancel() {
      // Toast("你点击了取消")
      // 返回上一步
      this.$router.go(-1);
    },
    // 输入内容的话，isshow变成2，就是历史商品页
    onInput() {
      // console.log("你输入数据了");
      // 当你在搜索中输入数据后，我才发送请求搜索列表的接口
      // 参数  就是 你在表单中输入的内容

      //   这个接口的调用，如果你传递了指定的字符串，那么就按照指定的字符串去返回对应满足的数据，如果你接口中的值，没有些任何数据，那么就返回接口中的所有数据
      GetSearchList({ keyword: this.value }).then(res => {
        // console.log(res);
        this.searchListData = res.data;
        // console.log(this.searchListData);
      });
      this.isShow = 2;
    }
  },
  components: {
    HistoryHot,
    SearchList,
    SearchGoodsList
  },
  created() {
    // 调用请求历史和热门的数据
    GetPopupdata().then(res => {
      // console.log(res);
      // 需要出现在搜索框中的数据
      this.defaultKeyword = res.data.defaultKeyword;
      // 历史记录的数据
      this.historyKeywordList = res.data.historyKeywordList;
      // 热门搜索的数据
      this.hotKeywordList = res.data.hotKeywordList;
    });
  }
};
</script>

<style lang='less'scoped >
.popup {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  position: absolute;
  top: 0;
}
</style>
